import { useReducer, useState } from "react";
import FoodList from "./components/FoodList/FoodList";
import CartContext from "./store/cartContext";
import FilterFood from "./components/FilterFood/FilterFood";
import Cart from "./components/Cart/Cart";

// 模拟一组食物数据
const MEALS_DATA = [
  {
    id: '1',
    title: '汉堡包',
    desc: '百分百纯牛肉配搭爽脆酸瓜洋葱粒与美味番茄酱经典滋味让你无法抵挡！',
    price: 12,
    img: '/img/meals/1.png'
  },
  {
    id: '2',
    title: '双层吉士汉堡',
    desc: '百分百纯牛肉与双层香软芝，加上松软面包及美味酱料，诱惑无人能挡！',
    price: 20,
    img: '/img/meals/2.png'
  },
  {
    id: '3',
    title: '巨无霸',
    desc: '两块百分百纯牛肉，搭配生菜、洋葱等新鲜食材，口感丰富，极致美味！',
    price: 24,
    img: '/img/meals/3.png'
  }, {
    id: '4',
    title: '麦辣鸡腿汉堡',
    desc: '金黄脆辣的外皮，鲜嫩幼滑的鸡腿肉，多重滋味，一次打动您挑剔的味蕾！',
    price: 21,
    img: '/img/meals/4.png'
  }, {
    id: '5',
    title: '板烧鸡腿堡',
    desc: '原块去骨鸡排嫩滑多汁，与翠绿新鲜的生菜和香浓烧鸡酱搭配，口感丰富！',
    price: 22,
    img: '/img/meals/5.png'
  }, {
    id: '6',
    title: '麦香鸡',
    desc: '清脆爽口的生菜，金黄酥脆的鸡肉。营养配搭，好滋味的健康选择！',
    price: 14,
    img: '/img/meals/6.png'
  }, {
    id: '7',
    title: '吉士汉堡包',
    desc: '百分百纯牛肉与香软芝士融为一体配合美味番茄醬丰富口感一咬即刻涌现！',
    price: 12,
    img: '/img/meals/7.png'
  }
];

//定义cartReducer
const cartReducer = (state, action) => {
  //复制购物车
  const newCart = { ...state }
  switch (action.type) {
    default:
      return state
    case 'Add':
      //判断新增商品是否在购物车中
      if (newCart.items.indexOf(action.food) === -1) {//不在
        action.food.amount = 1
        newCart.items.push(action.food)

      } else {
        action.food.amount += 1
      }
      newCart.totalAmount += 1
      newCart.totalPrice += action.food.price
      return newCart
    case 'Remove':
      action.food.amount -= 1
      if (action.food.amount === 0) {//商品数量是否归0
        newCart.items.splice(newCart.items.indexOf(action.food), 1)//移除商品
      }
      newCart.totalAmount -= 1
      newCart.totalPrice -= action.food.price
      return newCart
    case 'Clear':
      newCart.items.forEach(item => delete item.amount)
      newCart.totalAmount = 0
      newCart.totalPrice = 0
      newCart.items = []
      return newCart


  }

}
function App() {
  //存储初始食物列表
  const [foodList, setFoodList] = useState(MEALS_DATA)

  const [cartData, cartDispatch] = useReducer(cartReducer, {
    items: [],
    totalAmount: 0,
    totalPrice: 0
  })

  //将cart数据及操作改用reducer重构
  //存储购物车数据
  /* const [cartData, setCartData] = useState({
     items: [],//商品
     totalAmount: 0,//商品总数
     totalPrice: 0//商品总价
   }) */
  //向购物车中添加商品
  // const addFood = (food) => {
  //   const newCart = { ...cartData }

  //   //判断新增商品是否在购物车中
  //   if (newCart.items.indexOf(food) === -1) {//不在
  //     food.amount = 1
  //     newCart.items.push(food)

  //   } else {
  //     food.amount += 1
  //   }

  //   newCart.totalAmount += 1
  //   newCart.totalPrice += food.price

  //   setCartData(newCart)

  // }

  //减少商品数量
  // const subFood = (food) => {
  //   const newCart = { ...cartData }
  //   food.amount -= 1
  //   if (food.amount === 0) {//商品数量是否归0
  //     console.log('object');
  //     newCart.items.splice(newCart.items.indexOf(food), 1)//移除商品
  //     console.log(newCart);
  //   }

  //   newCart.totalAmount -= 1
  //   newCart.totalPrice -= food.price
  //   setCartData(newCart)

  // }
  // const clearFood = () => {
  //   const newCart = { ...cartData }
  //   newCart.items.forEach(item => delete item.amount)
  //   newCart.totalAmount = 0
  //   newCart.totalPrice = 0
  //   newCart.items = []
  //   setCartData(newCart)

  // }
  //根据关键词过滤食物列表函数
  const filterFood = (keyword) => {
    console.log(keyword);
    const neeList = MEALS_DATA.filter(item => item.title.indexOf(keyword) !== -1)

    setFoodList(neeList)
  }
  return (
    <CartContext.Provider value={{ ...cartData, cartDispatch }}>
      <div>
        <FilterFood filterFood={filterFood} />
        <FoodList foodList={foodList} />
        <Cart />
        {/* <BackDrop/> */}
      </div>

    </CartContext.Provider>



  );
}

export default App;
